<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
        /*    通配符选择器： 所有元素全部生效 比如：取消某些元素的默认效果 ，因为这些默认效果会影响整体布局 */
            margin: 0;
        }

        p {
        /*    元素选择器： 我们之前在HTML中学习过的所有元素名称*/
        /*    color: 表示文字颜色*/
            color: #ffc0c0;
        }

        .p1 {
        /*    类选择器： . + 类名 */
            color: purple;
        }

        #p2 {
            color: green;
        }

        div {
            color: blue;
        }

        input[type="text"] {
        /*    属性选择器*/
        /*    [] 获取该元素的属性*/
            color: cyan;
        }

        a:hover {
        /*    伪类选择器*/
        /*    当鼠标悬停的效果*/
            color: antiquewhite;
        }

        .p3::before {
        /*    伪元素选择器: 伪元素要求要有content（内容）*/
            content: "before";
        }


       div > span {
           /*直接子代选择器： 使用 >*/
           font-size: 30px;
       }

       div span {
       /*    后代选择器 使用空格 隔开即可*/
           font-size: 50px;
       }

       p + span {
           /*相邻兄弟选择器： 两个元素要紧挨着*/
           /*font-size: 100px;*/
       }

       #p2 ~ span {
           /* 通用兄弟选择器： 不管相不相邻 只要是同级元素都能被找到*/
           font-size: 80px;
       }

      a,
      div {
      /*    并集选择器： 所有符合都生效*/

      }

      p.p4 {
      /*    交集选择器： 既是又是*/
      }



    </style>
</head>
<body>
<!--  选择器就是通过不同的语法来找到你要渲染的那个元素-->
<!--类型(元素选择器)、类和 ID 选择器-->
<!--
    基本语法：
    元素选择器 {
        属性名： 属性值


    }
    
    我们在工作中，CSS主要用class属性  JS中主用id属性
    当有相同的选择器时会产生覆盖现象 如果同级则后面的生效
    如果不同级 就需要考虑优先级问题

    这些选择器可以任意组合 技巧：去网页源代码进行复制


-->
<p>段落标签</p>

<!--所有标签中都有class属性 属性值由我们程序员自己定义 class类名可以重复-->
<p class="p1">p1</p>
<div class="p1">div1</div>

<!--所有标签中都有id属性 属性值由我们程序员自己定义 id不可以重复 名字要求唯一-->
<p id="p2">p2</p>

<div>div2</div>

<input type="text">
<input type="password">

<!--伪类和伪元素：
    伪类：首先是一个类 类样式 放在代码是一个效果
    伪元素：首先是一个元素 就像其他标签一样 在文档中存在的内容一样


-->
<a href="#">链接</a>
<p class="p3">段落</p>

<span>span0</span>
<div>
    <span>span1</span>
    <p>
        <span>span2</span>
    </p>
</div>

<p class="p4">段落</p>
</body>
</html>